<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file ="../include/base.jsp"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/bootstrap.css"  />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/colorpicker.css"  />
    <link rel="stylesheet" media="screen" type="text/css" href="<%=basePath%>css/layout.css" />
	<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/colorpicker.js"></script>
</head>
<body>
	<div style = "margin:auto;margin-top:60px;min-height:600px;width:700px;border:1px solid #ccc;border-radius:5px 5px">
		<div style = "background-color:#F1F5F9;width:700px;border-radius:5px 5px;border-bottom:1px solid #ccc">
			<div style = "padding-top:20px;font-weight:bold;font-size:18px"><span style = "margin-left:-480px">编辑日程安排类别</span></div>
			
		
		</div>
		<div style = "margin-top:30px;border-bottom:1px solid #ccc">
			<span style = "font-size:14px;margin-left:-500px;">添加新的类别</span><br />
			<input type="text" style = "margin-top:5px;margin-left:-320px;" id="name"/><a href="javaScript:;" class = "btn btn-success" style = "margin-left:10px" id="addType">添加</a>
		</div>
		<div id="myType" style = "margin-left:50px;margin-top:20px;margin-right:50px">
			<c:forEach items="${list2}" var = "taskType">
			<div>
			<div class="colorSelector4" id = "${taskType.id }" style = "border:1px solid black;width:60px;height:25px;background-color:${taskType.color};">	
			</div>
			<div id ="myinput" class = "${taskType.id }" style = "margin-top:-25px;margin-left:80px;font-weight:bold;font-size:16px"><span style = "margin-left:-450px">${taskType.typeContent}</span></div>
			<div style = "float:right;margin-top:-10px"><a href="javaScript:;" id="${taskType.id }" class="delType"><i class="icon-trash"> </i></a><a href="javaScript:;"class="edit">编辑</a></div>
			<hr />
			</div>
			</c:forEach>
			
		</div>
		
	
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".delType").live("click",function(){
				
				var id = $(this).attr("id");
				
				$.get("<%=basePath%>taskType/del.action?id="+id,function(data){
				});
			
				$(this).parent().parent().remove();
			
			
			
			});
			$(".edit").live("click",function(){
				$(".in").each(function(){
					
					var m =$(this).children(".input2").attr("value");
					
					$(this).replaceWith("<span style = 'margin-left:-450px'>"+m+"</span>");
				
				});
				var q= $(this).parent().parent().children("#myinput").children().html();
				$(this).parent().parent().children("#myinput").children().replaceWith("<div class ='in'><input  class = 'input2' type = 'text'  style='margin-left:-210px;margin-bottom:-5px' value='"+q+"'/><a href='javaScript:;' class = 'saveEdit btn' style='margin-left:5px;margin-bottom:-5px'>保存更改<a></div>");
				$(".input2").focus();
			
			
			
			});
			$(".saveEdit").live("click",function(){
				var m = $(this).parent().children(".input2").attr("value");
				var id = $(this).parent().parent().attr("class");
				$.get("<%=basePath%>taskType/editName.action?id="+id+"&name="+m,function(data){
					$(".in").replaceWith("<span style = 'margin-left:-450px'>"+m+"</span>");
				});
			
			
			
			
			
			
			});
			<%-- $(".edit").live("click",function(){
				$(this).parent().parent().children("#myinput").children().replaceWith("<input type = 'text' value='xxx'/>");
				var id = $(this).attr("id");
				alert(id);
				$.get("<%=basePath%>taskType/del.action?id="+id,function(data){
				});
			
				$(this).parent().parent().remove();
			
			
			
			}); --%>
			
			$("#addType").click(function(){
				
				var v = $("#name").attr("value");
				
				$.get("<%=basePath%>taskType/add.action?name="+v,function(data){
					$("#myType").prepend($("<div id='"+data.id+"' class='colorSelector4 t'  style = 'border:1px solid black;width:60px;height:25px;background-color:"+data.color+";'></div><div style = 'margin-top:-25px;margin-left:80px;font-weight:bold;font-size:16px'><span style = 'margin-left:-450px'>"+data.typeContent+"</span></div><div style = 'float:right;margin-top:-10px'><a href='javaScript:;' id='"+data.id+"' class='delType'><i class='icon-trash'> </i></a><a href='javaScript:;' class='edit'>编辑</a></div><hr />"));
					
					
				
				
				
				});
				
			
			});
			var v;
			$(".colorSelector4").live("click",function(){
				$(".colorSelector4").each(function(){
					$(this).removeClass("my");
				});
				
				$(this).ColorPicker({
					color: '#0000ff',
					onShow: function (colpkr) {
						$(colpkr).fadeIn(500);
						return false;
					},
					onHide: function (colpkr) {
						$(colpkr).fadeOut(500);
						return false;
					},
					onChange: function (hsb,hex,rgb) {
						v='#'+hex;
						$(".my").css('backgroundColor', '#' + hex);	
						var id = $(".my").attr("id");
						var m =$(".my").css('backgroundColor');
						$.get("<%=basePath%>taskType/editcolor.action?color="+m+"&id="+id,function(data){
						});
			
		
							
					}
				});
			$(this).addClass("my");
			
			
			
		});
		
		
		});
	
	
	</script>
</body>
</html>